import React, { useState, useEffect } from 'react'
import {
  Button,
  Card,
  Col,
  Form,
  FormInstance,
  Input,
  Popconfirm,
  Row,
  Space,
  Table,
  Tag
} from 'antd'
import type { ColumnsType } from 'antd/es/table'
import './index.scss'
import { useNavigate } from 'react-router-dom'
import { PlusOutlined, SearchOutlined, UndoOutlined } from '@ant-design/icons'
import { getUserList, getUserOne } from '@/api/user'
import { AddUser } from '@/views/user/component'

const UserIndex: React.FC = () => {
  const formRef = React.useRef<FormInstance>(null)
  const [userList, setUserList] = useState([])
  const [addOpen, setAddOpen] = useState<boolean>(false)
  const navigate = useNavigate()
  let [userData, setUserData] = useState({})

  useEffect(() => {
    initData()
  }, [])

  const initData = (search = {}) => {
    getUserList(search).then((userList) => {
      console.log(userList)
      setUserList(userList.data.list)
    })
  }

  const columns: ColumnsType<DataType> = [
    {
      title: '姓名',
      dataIndex: 'userName'
    },
    {
      title: '呢称',
      dataIndex: 'nickname'
    },
    {
      title: '头像',
      dataIndex: 'userImg'
    },
    {
      title: '邮箱',
      dataIndex: 'userEmail'
    },
    {
      title: '积分',
      dataIndex: 'integral'
    },
    {
      title: '评分',
      dataIndex: 'balance'
    },
    {
      title: '操作',
      render: (_, record, index) => (
        <Space size="middle">
          <Popconfirm
            title="确认删除"
            onConfirm={() => del(index)}
            onCancel={() => {}}
            okText="删除"
            cancelText="取消"
          >
            <a>删除</a>
          </Popconfirm>
          <a onClick={() => detailPage(record)}>详情</a>
        </Space>
      )
    }
  ]
  function del(index: number) {
    sourceData.splice(index, 1)
    setData(sourceData.slice(0))
  }
  function detailPage(detail: string) {
    console.log(detail)
    setUserData(detail)
    setAddOpen(true)
    // getUserOne({userId: detail.userId})
    // navigate('/user/detail/' + key)
  }
  const onFinish = (values: any) => {
    console.log(values)
    initData(values)
  }
  function reset() {
    formRef.current?.resetFields()
    initData()
  }
  return (
    <div>
      <Card className="searchForm">
        <Form
          initialValues={{
            username: ''
          }}
          onFinish={onFinish}
          ref={formRef}
          layout="inline"
          name="search"
        >
          <Row gutter={[10, 10]}>
            <Col>
              <Form.Item label="模糊查询用户" name="search">
                <Input allowClear placeholder="请输入用户名或者邮箱" />
              </Form.Item>
            </Col>
            <Col>
              <Button
                htmlType="submit"
                icon={<SearchOutlined />}
                type="primary"
              >
                搜索
              </Button>
            </Col>
            <Col>
              <Button htmlType="button" icon={<UndoOutlined />} onClick={reset}>
                重置
              </Button>
            </Col>
            <Col>
              <Button
                type="primary"
                htmlType="button"
                icon={<PlusOutlined />}
                onClick={() => setAddOpen(true)}
              >
                添加用户
              </Button>
            </Col>
          </Row>
        </Form>
      </Card>
      <Card bodyStyle={{ padding: '15px' }}>
        <Table bordered columns={columns} dataSource={userList} />
      </Card>
      {addOpen && (
        <AddUser
          userData={userData}
          addCallback={(res) => {
            if (res) {
              initData()
              setAddOpen(false)
            }
          }}
          ModalCancel={() => {
            setUserData({})
            setAddOpen(false)
          }}
        />
      )}
    </div>
  )
}

export default UserIndex
